<template>
  <div id="message">
    <div class="bg"></div>
    <p class="msg">消息</p>
    <div class="part1">
      <img src="@/assets/img/Message1.png" alt="" />
    </div>
    <div class="part2">
      <div>
        <p><img src="@/assets/img/Message2.png" alt="" /></p>
        <p><img src="@/assets/img/Message3.png" alt="" /></p>
      </div>
    </div>
    <p class="nomore">
      <img src="@/assets/img/nomore.png" alt="" />
    </p>
  </div>
</template>
<script>
export default {
  name: "Message",
  setup() {},
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
#message {
  .bg {
    position: absolute;
    width: 333.5px;
    height: 391px;
    background-image: url(../../assets/img/Messagebg.png);
    top: 0;
    left: 0;
    z-index: -1;
  }
  > .msg {
    text-align: center;
    font-size: 16px;
    line-height: 16px;
    height: 16px;
    margin-bottom: 34px;
    margin-top: 14px;
  }
  > .part1 {
    text-align: center;
    img {
      height: 113.5px;
      width: 395.5px;
    }
  }
  > .part2 {
    > div {
      margin: 0 auto;
      width: 395.5px;
      height: 327px;
      text-align: center;
      > p {
        margin-top: 20px;
        img {
          height: 62.5px;
          width: 363.5px;
        }
      }
    }
  }
  > .nomore {
    text-align: center;
  }
}
</style>
